<template>
    <div class="formItem">
      <van-popup v-model="showAreaSelect" position="bottom" >
        <van-area :area-list="areaList" @confirm='areaChange' @cancel='hideAreaSelect' />
      </van-popup>
      <van-cell-group>
        <van-cell title="姓名" class='cell'>
          <template slot="">
            <van-field class="input" v-model="user.name"  maxlength="8" placeholder="请输入姓名"  clearable input-align="right" />
          </template>
        </van-cell>
        <van-cell title="年龄" class='cell'>
          <template slot="">
            <van-field class="input" v-model="user.age"  maxlength="4" placeholder="请输入年龄"  clearable input-align="right" />
          </template>
        </van-cell>
        <van-cell title="性别"  class='cell'>
          <template slot="">
            <div class="select-box">
              <div @click="selectSex(1)" :class="user.sex ? 'activeSex':''">
                <i class="iconfont icon-nan "></i>
                <span>男</span>
              </div>
              <div style="margin-left: 0.5rem" @click="selectSex(0)" :class="user.sex ? '':'activeSex'">
                <i class="iconfont icon-nv "></i>
                <span>女</span>
              </div>
            </div>
          </template>
        </van-cell>
        <van-cell title="手机号码"  class='cell'>
          <template slot="">
            <span style="color: #42B574;" @click="changePhone">修改</span>
          </template>
        </van-cell>
<!--        <van-cell title="证件类型" is-link class='cell'>
          <template slot="">
            <span>身份证</span>
          </template>
        </van-cell> -->
        <van-cell title="证件号"  class='cell'>
          <template slot="">
            <van-field class="long-input" v-model="user.card"  maxlength="18" clearable placeholder="请输入" input-align="right" />
          </template>
        </van-cell>
        <van-cell title="注册证号"  class='cell'>
          <template slot="">
            <van-field class="long-input" v-model="user.signNum"  maxlength="18" clearable placeholder="请输入" input-align="right" />
          </template>
        </van-cell>
        <van-cell title="省份" is-link class='cell' @click="showAreaSelect=true">
          <template slot="">
           <span>{{user.province}}</span>
          </template>
        </van-cell>
      </van-cell-group>
    </div>
</template>

<script>
  import areaList from 'vant/packages/area/demo/area.js'
  import teamName from './formTitle'
    export default {
        name: "formItem",
				props:{
					info: Array,
				},
        data(){
          return{
            areaList,
            showAreaSelect:false,
            user:{
              name:"",
              age:"",
              sex:0,
              phone:"",
              card:"",
              signNum:"",
              province:""
            },
          }
        },
      components:{
          teamName
      },
      methods:{
        changePhone(){},
        selectSex(type){
          this.user.sex = type
          console.log(this.user.sex)
        },
        areaChange(value){
          console.log(value)
          this.showAreaSelect = false;
          this.user.province = `${value[0].name} ${value[1].name} ${value[2].name}`
        },
        hideAreaSelect(){
          this.showAreaSelect = false;
        }
      },
			conform(){
				alert(1)
			}
				
    }
</script>

<style lang="less" scoped>
  .cell{
    text-align: left;
    .select-box{
      display: flex;
      justify-content: flex-end;
    }
    .iconfont{
      margin-right: 0.1rem;
      font-size: 0.34rem;
    }
    .activeSex{
      color: #42b574;
    }
  }
  .input{
    padding: 0;
    float: right;
    width: 2rem;
  }
  .short-input{
    padding: 0;
    float: right;
    width: 1rem;
  }
  .long-input{
    padding: 0;
    float: right;
    width: 3rem;
  }
  
</style>
